<div [hidden]="!authenticated" style="text-align: center">
  <h1>
    Welcome to {{title}}
  </h1>
  <button (click)="getOrder()" type="button" class="btn btn-primary">Get Order Info</button>
  <p>order id:{{order}}</p>
  <!--<p>order productId :{{order.id}}</p>-->
  <button (click)="logout()" type="button" class="btn btn-primary">logout</button>
</div>

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4">
    <div [hidden]="authenticated">
      <p>please login</p>
      <form role="form" (submit)="login()">
        <div class="form-group">
          <label for="username">Username:</label>
          <input type="text" class="form-control" id="username" name="username" [(ngModel)]="credentials.username"/>
        </div>
        <div class="form-group">
          <label for="password">Password:</label>
          <input type="password" class="form-control" id="password" name="password" [(ngModel)]="credentials.password"/>
        </div>
        <button type="submit" class="btn btn-primary">login</button>
      </form>
    </div>
  </div>
  <div class="col-lg-4"></div>
</div>
